<template>
  <div class="w1200 my_info_page">
    <!-- 面包屑 开始 -->
    <div class="breadcrumb">
      <el-breadcrumb  class="el_breadcrumb" separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>首页</el-breadcrumb-item>
        <el-breadcrumb-item>我的</el-breadcrumb-item>
        <el-breadcrumb-item>个人中心</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 面包屑 end -->

    <div class="content mt20 mb20">
      <!-- 左侧菜单 开始 -->
      <div class="menu_box">
        <div class="cell" :class="menuId == item.id ? 'active' : ''" v-for="(item, index) in menuList"
          :key="`menu_${index}`" @click="menuEvent(item)">
          {{ item.name }}
        </div>
      </div>
      <!-- 左侧菜单 end -->

      <!-- 右侧内容 开始 -->
      <div class="content_box">
        <!-- 个人信息 开始 -->
        <MyInfo v-if="menuId == 1" />
        <!-- 个人信息 end -->

        <!-- 我的点评 开始 -->
        <MyReview v-if="menuId == 2" />
        <!-- 我的点评 end -->

        <!-- 我的预约 开始 -->
        <MyBook v-if="menuId == 3" />
        <!-- 我的预约 end -->

        <!-- 我的关注 开始 -->
        <MyFocus v-if="menuId == 4" />
        <!-- 我的关注 end -->
      </div>
      <!-- 右侧内容 end -->
    </div>
  </div>
</template>
<script>
import MyInfo from "./info.vue";
import MyReview from "./review.vue";
import MyBook from "./book.vue";
import MyFocus from "./focus.vue";
import { PLATFORM_TYPE,GET_PERSONAL_INFO,GET_SEO_SETTING_INFO } from "@/http/interface";
export default {
  components: {
    MyInfo,
    MyReview,
    MyBook,
    MyFocus,
  },
  data() {
    return {
      menuList: [
        { name: "个人信息", id: 1 },
        { name: "我的点评", id: 2 },
        { name: "我的预约", id: 3 },
        { name: "我的关注", id: 4 },
      ],
      menuId: 1,
      userInfo: {},
      seoInfo: {}
    };
  },
  head() {
    return {
      title: this.seoInfo.title,
      meta: [
        {
          hid: "description",
          name: "description",
          content: this.seoInfo.description,
        },
        {
          hid: "Keywords",
          name: "Keywords",
          content: this.seoInfo.keywords,
        },
      ],
    };
  },
  middleware({ route, redirect, req,$cookies }) {
    let token = $cookies.get('token')
    if(!token){
      redirect("/login");
    }
  },
  async asyncData({ query, $cookies, $axios }) {
    let res = await $axios.get(GET_PERSONAL_INFO);
    let userInfo = res.data || {};

    // 获取seo配置
    let seo = await $axios.get(GET_SEO_SETTING_INFO, { params: { type: 11, platform: PLATFORM_TYPE } })
    let seoInfo = seo.data || {}

    $cookies.set("userInfo", userInfo);
    return { userInfo, menuId: query.type || 1, seoInfo };
  },
  mounted() {
    console.log(this.$cookies.getAll());
  },
  methods: {
    // 菜单点击事件
    menuEvent(row) {
      this.menuId = row.id;
    },
  },
};
</script>
<style lang="less" scoped>
@import "/assets/styles/index/my/center.less";
</style>